<template>
    <div style="width: 100%;max-width: 600px;height: 100%;overflow-y: auto;  margin: 0 auto;" :class="{isSetPage:props.isSet}">
        <template v-if="props.isSet">
            <p style="font-size: 12px;margin-bottom: 0;" class="serchTitle">
                目前内容偏好
                <span class="resetBtn">
                    重置筛选条件
                </span>
            </p>
            <div class="game-type-list-all">
                <div class="all-item">
                    最多人玩
                    <close-little width="8" class="icon"></close-little>
                </div>
                <div class="all-item">
                    经典游戏
                    <close-little width="8" class="icon"></close-little>
                </div>
                <div class="all-item">
                    评价最高
                    <close-little width="8" class="icon"></close-little>
                </div>
            </div>
        </template>
        <template v-if="!props.isSet">
            <p class="serchTitle">
                筛选条件
                <span class="resetBtn">
                    重置筛选条件
                </span>
            </p>

            <p class="serchTips">
                由于您的性向喜好设置，10 个游戏被隐藏了
                <span class="editBtn">
                    修改偏好设定
                </span>
                <close-little width="13" class="closeBtn"></close-little>
            </p>
        </template>
        <div>
            <nut-collapse v-model="collapseVal1">
                <nut-collapse-item name="name1" title="平台">
                    <nut-checkbox-group v-model="val1">
                        <p v-for="(item,index) in cateList?.platform" :key="index" class="checkbox-item">
                            <nut-checkbox :label="item.name">
                                <template #icon> <i class="check"></i> </template>
                                <template #checkedIcon>
                                    <i class="checked"></i>
                                </template>
                                <span class="check-item-name">{{ item.name }}</span>
                                <span class="num">({{ item.total }})</span>
                            </nut-checkbox>
                        </p>
                    </nut-checkbox-group>
                </nut-collapse-item>
            </nut-collapse>
        </div>
        <div class="pt10">
            <nut-collapse v-model="collapseVal2">
                <nut-collapse-item name="name1" title="游戏类别">
                    <nut-checkbox-group v-model="val2">
                        <p v-for="(item,index) in cateList?.category" :key="index" class="checkbox-item">
                            <nut-checkbox :label="`${item.category_name}_${item.id}_category`">
                                <template #icon> <i class="check"></i> </template>
                                <template #checkedIcon>
                                    <i class="checked"></i>
                                </template>
                                <span class="check-item-name">{{ item.category_name }}</span>
                                <span class="num">({{ item.game_count }})</span>
                            </nut-checkbox>
                        </p>
                    </nut-checkbox-group>
                </nut-collapse-item>
            </nut-collapse>
        </div>

        <div class="pt10">
            <nut-collapse v-model="collapseVal3">
                <nut-collapse-item name="name1" title="标签" value="">
                    <nut-checkbox-group v-model="val3">
                        <p v-for="(item,index) in cateList?.tag" :key="index" class="checkbox-item">
                            <nut-checkbox :label="`${item.category_name}_${item.id}_tag`">
                                <template #icon> <i class="check"></i> </template>
                                <template #checkedIcon>
                                    <i class="checked"></i>
                                </template>
                                <span class="check-item-name">{{ item.category_name }}</span>
                                <span class="num">({{ item.game_count }})</span>
                            </nut-checkbox>
                        </p>
                    </nut-checkbox-group>
                </nut-collapse-item>
            </nut-collapse>
        </div>


        <p class="otherTips">
            开发团队
            <rect-down width="13" class="otherIcon"></rect-down>
        </p>

        <p class="otherTips">
            语言
            <rect-down width="13" class="otherIcon"></rect-down>
        </p>


        <div class="sureBtn">
            <div class="btnInner" @click="closeWindow">
                确认筛选
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {CloseLittle,RectDown} from '@nutui/icons-vue'
import {axiosService} from "@http";


export interface CateListInterface {
    platform: Platform[]
    category: Category[]
    tag: Tag[]
}

export interface Platform {
    name: string
    total: number
}

export interface Category {
    id: number
    category_name: string
    game_count: number
}

export interface Tag {
    id: number
    category_name: string
    game_count: number
}


const collapseVal1=ref(['name1'])
const collapseVal2=ref(['name1'])
const collapseVal3=ref(['name1'])
const val1=ref([])
const val2=ref([])
const val3=ref([])

const cateList = ref<CateListInterface>()

const emits = defineEmits(['closeWindow'])

const props=defineProps({
    isSet:{
        type:Boolean,
        default:false
    }
})
const closeWindow=()=>{
    var platform = val1.value
    var category_ids = val2.value
    var tag_ids = val3.value
    emits('closeWindow',{platform,category_ids,tag_ids})
}

const getCateList=()=>{
    axiosService.post<CateListInterface>('/api/Game/cateList',{}).then(res=>{
        cateList.value=res.data
    })
}
getCateList()


</script>

<style scoped lang="scss">
:deep(.nut-collapse-item .nut-collapse-item__title){
    background-color: #5f5f5f;
    color: #fff;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    padding-top: 10px;
    padding-bottom: 10px;
}



:deep(.nut-collapse__item-wrapper__content){
    background-color: #5f5f5f !important;
    color: #fff !important;
    padding:5px 20px !important;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    padding-top: 0 !important;
}

.check{
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    margin-top: -2px;
    text-align: center;
    background: url('../../../assets/check1.png') no-repeat center;
    background-size: contain;
}

.checked{
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    margin-top: -2px;
    background: url('../../../assets/checked.png') no-repeat center;
    background-size: contain;
}

.checkbox-item{
    padding: 5px 0;
}

:deep(.nut-checkbox__label ){
    margin-left: 10px;
    color: #fff;
    font-weight: 600;
}

.check-item-name{
    display: inline-block;
    width: 120px;
}
.num{
    color: #b4b4b4;
}

:deep(.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-icon){
    color: #fff;
}

:deep(.nut-collapse-item__border .nut-collapse-item__title::after){
    display: none;
}

:deep(.nut-collapse-item__title-mtitle){
    font-weight: 600;
    font-size: 16px;
}

.serchTitle{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    &::before{
        content: '';
        display: inline-block;
        width: 5px;
        background-color: #d122be;
        height: 18px;
        margin-bottom: -3px;
    }
    .resetBtn{
        float: right;
        font-size: 12px;
        font-weight: normal;
        text-decoration: underline;
    }
}
.serchTips{
    font-size: 12px;
    background-color: #5f5f5f;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    position: relative;
    .editBtn{
        color: #84dbff;
    }
    .closeBtn{
        position: absolute;
        top: 10px;
        right: 20px;
        color: #fff;
        font-size: 12px;
    }
}

.otherTips{
    font-size: 16px;
    background-color: #5f5f5f;
    margin-top: 10px;
    padding: 10px 20px;
    padding-right: 0;
    font-weight: bold;
    border-radius: 5px;
    position: relative;
    .otherIcon{
        position: absolute;
        top: 10px;
        right: 20px;
        color: #fff;
    }
}

.sureBtn{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    .btnInner{
        width: 195px;
        height: 37px;
        font-size: 16px;
        background-color: #fff;
        text-align: center;
        line-height: 37px;
        color: #000000;
        border-radius: 18px;
    }
}

.game-type-list-all {
        overflow-x: auto;
        padding: 10px;
        .all-item {
            position: relative;
            display: inline-block;
            margin-right: 10px;
            width: 92px;
            height: 25px;
            line-height: 25px;
            font-size: 12px;
            border: 1px solid #fff;
            color: #fff;
            padding-left: 10px;
            border-radius: 15px;

            .icon {
                position: absolute;
                top: 4px;
                right: 8px;
            }

            &.active {
                border: none;
                background-image: linear-gradient(to left, #f900ff, #00cefa);
            }
        }
    }
</style>
